<template>
    <div>
        <div class="toolContainer">
            <el-input placeholder="请输入英文名" v-model="role.name">
                <template #prepend>ROLE_</template>
            </el-input>
            <el-input v-model="role.nameZH" placeholder="请输入中文名"></el-input>
            <el-button type="primary" icon="Plus" @click="addRoleHandler">添加角色</el-button>
        </div>
        <div class="permissionManualMain">
            <el-collapse v-model="activeName" accordion @change="changeHandler">
                <el-collapse-item :title="role.roleDisplayName" :name="role.id" v-for="(role, index) in roles" :key="index">
                    <div>
                        <el-card class="box-card">
                            <template #header>
                                <div class="clearfix">
                                    <span>可访问资源</span>
                                    <el-button style="float: right;padding:3px 0;color:#ff0000;" icon="Delete" text @click="deleteRoleHandler(role)"></el-button>
                                </div>
                            </template>
                            <div>
                                <el-tree
                                        :data="menuData"
                                        :props="defaultProps"
                                        show-checkbox
                                        :default-checked-keys="selectedMenu"
                                        node-key="id"
                                        ref="tree"
                                />
                                <div style="display: flex;justify-content: flex-end">
                                    <el-button size="mini" @click="cancelHandler">取消修改</el-button>
                                    <el-button type="primary" size="mini" @click="updateHandler(role.id, index)">确认修改</el-button>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
    import {deleteRequest, getRequest, postRequest, putRequest } from "../../../http";
    import {ElMessage, ElMessageBox} from 'element-plus';
    export default {
        name: "PermissManagement",
        data(){
            return {
                role:{
                    id:'',
                    name:'',
                    nameZH:''
                },
                activeName:-1,
                roles:[],
                menuData:[],
                defaultProps:{
                    children: 'children',
                    label: 'name',
                },
                selectedMenu:[]
            }
        },
        mounted() {
            this.initialRoles();
        },
        methods:{
            cancelHandler(){
                this.activeName = -1;
            },
            updateHandler(roleId, index){
                let tree = this.$refs.tree[index];
                let selectedKeys = tree.getCheckedKeys(true);
                let parameters = '';
                selectedKeys.forEach(key=>{
                    parameters+="&menuIds="+key;
                });
                putRequest(`Permission/basic`,{
                    roleId:roleId,
                    menuIds:selectedKeys
                }).then(resp=>{
                    if(resp){
                        this.initialRoles();
                        this.activeName = -1;
                    }
                });
            },
            deleteRoleHandler(role){
                ElMessageBox.confirm(
                    `你确定要删除[${role.name}]吗?`,
                    '系统提示',
                    {
                        confirmButtonText: "确认",
                        cancelButtonText: "取消",
                        type: 'warning'
                    }
                ).then(() => {
                    deleteRequest(`/permission/basic/${role.id}`).then(resp => {
                        this.initialRoles();
                    });
                }).catch(() => {

                });
            },
            addRoleHandler(){
                if(this.role.name && this.role.nameZH){
                    postRequest(`/permission/basic?roleName=${this.role.name}&roleNameZh=${this.role.nameZH}`).then(resp=>{
                        if(resp){
                            this.initialRoles();
                            this.role.name = '';
                            this.role.nameZH = '';
                        }
                    });
                }else{
                    ElMessage({
                        message:'请填写角色名称',
                        type:'warning'
                    });
                }
            },
            changeHandler(roleId){
                if(roleId){
                    this.initialMenu();
                    this.initialSelectedMenu(roleId);
                }
            },
            initialSelectedMenu(roleId){
                getRequest(`/permission/basic/${roleId}`).then(resp=>{
                    if(resp){
                        this.selectedMenu = resp;
                    }
                });
            },
            initialRoles(){
                getRequest('/permission/basic/all').then(resp=>{
                    if(resp){
                        this.roles = resp;
                    }
                });
            },
            initialMenu(){
                getRequest('/permission/basic/allMenus').then(resp=>{
                    if(resp){
                        this.menuData = resp;
                    }
                });
            }
        }
    }
    /*
    permissController
    * 获取所有角色 get
    * 更新角色菜单 put
    * 查询所有菜单 get
    * 根据角色ID查询菜单ID get
    * 添加角色 post
    * 删除角色 delete
    * */
</script>

<style scoped>
    .toolContainer{
        display: flex;
        justify-content: flex-start;
    }
    .toolContainer .el-input{
        width: 300px;
        margin-right: 5px;
    }
    .permissionManualMain{
        margin-top:10px;
        width: 700px;
    }
    .card-header{
        display: flex;
        justify-content: flex-end;
    }
</style>
